<template>
  <div>
    <el-table :data="cutBean.records" border style="width: 100%">
      <el-table-column prop="date" label="用户名" width="300" />
      <el-table-column prop="content" label="密码" />
      <el-table-column prop="date" label="真实姓名" width="300" />
      <el-table-column fixed="right" label="操作">
        <template #default>
          <el-button  type="danger" size="small">删除角色</el-button>
          <el-button  type="warning" size="small" @click="changeVisible=true">修改权限</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页模块-->
    <el-pagination
        v-model:currentPage="cutBean.current"
        v-model:page-size="cutBean.size"
        background
        layout="prev, pager, next, jumper"
        :total="cutBean.total"
        @current-change="findByItem"
    />
    <div style="display: flex">
    <el-button  type="success" style="margin-top: 150px;margin-left: 300px" @click="dialogVisible=true">添加新用户</el-button>
    <!-- 条件查询 -->
    <div style="width: 300px;height: 200px;border: 1px #000 solid;line-height: 30px;margin-left: 300px;margin-top: 50px">
      <h5>查询用户信息</h5>
      用户名称:<el-input v-model="name" style="width: 200px"/><br>

      <el-button type="success">查询</el-button>
    </div>
  </div>

    <!--      添加信息弹出框-->
    <el-dialog
        v-model="dialogVisible"
        title="添加用户信息"
        width="30%"
    >
      <el-form
          ref="userForm"
          :model="userObj"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
          status-icon
          style="width: 400px;"
      >
        <el-form-item label="用户名：" prop="">
          <!--                        <el-input v-model="userObj.name"/>-->
        </el-form-item>
        <el-form-item label="真实姓名：" prop="">
          <el-input/>
        </el-form-item>
        <el-form-item label="拥有角色：" prop="">
           <el-checkbox v-model="roleArray" label="sport" size="large">体育</el-checkbox>
          <el-checkbox v-model="roleArray" label="draw" size="large">美术</el-checkbox>
          <el-checkbox v-model="roleArray" label="music" size="large">音乐</el-checkbox><br>

        </el-form-item>
        <el-form-item label="拥有权限：" prop="">
         {{roleArray}}
        </el-form-item>

      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">添加</el-button>
      </span>
      </template>
    </el-dialog>

    <!--      修改弹出框-->
    <el-dialog
        v-model="changeVisible"
        title="修改用户权限"
        width="30%"
    >
      <el-form
          ref="userForm"
          :model="userObj"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
          status-icon
          style="width: 400px;"
      >
        <el-form-item label="用户名：" prop="">

        </el-form-item>
        <el-form-item label="真实姓名：" prop="">

        </el-form-item>
        <el-form-item label="当前角色：" prop="">
          <el-checkbox v-model="roleArray" label="sport" size="large">体育</el-checkbox>
          <el-checkbox v-model="roleArray" label="draw" size="large">美术</el-checkbox>
          <el-checkbox v-model="roleArray" label="music" size="large">音乐</el-checkbox><br>

        </el-form-item>
        <el-form-item label="拥有权限：" prop="">
          {{roleArray}}
        </el-form-item>

      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="changeVisible = false">确定</el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
name: "user",
data(){
    return{
      cutBean:{
        records: [
          {name:"超级管理员"},
          {name:"普通管理员"},
          {name:"采购管理员"},
        ],
        total:20,
        pages:5,
        size:4,
        current:1,
      },
      changeVisible:false,
      roleArray:[],
      dialogVisible:false
        }
    },
  methods:{
  findByItem(){

  }
  }
}
</script>

<style scoped>

</style>